<template>
  <view class="coupon-center">
    <view class="lean-bg-public">
      <view class="title">
        <view class="u-back-wrap" @tap="goBack">
          <view class="u-icon-wrap">
            <u-icon name="nav-back" color="#606266" size="44"></u-icon>
          </view>
        </view>
        <span>领券中心</span>
      </view>
    </view>
    <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
      <div class="swiper-box">
        <div class="swiper-item">
          <u-empty
            mode="coupon"
            text="暂无优惠券"
            src="/static/img/coupon-empty.png"
            v-if="whetherEmpty"
            style="margin-top: 190rpx"
          ></u-empty>
          <view
            v-else
            class="coupon-item-box"
            v-for="(item, index) in couponList"
            :key="index"
            :style="{
              height: item.id == '1964874954362302466' ? '226rpx' : '172rpx',
            }"
          >
            <view class="coupon-item">
              <view class="stack" v-if="item.id == '1964874954362302466'"
                >泡泡国王、新会员、满足条件名称可领</view
              >
              <view class="left">
                <view class="message">
                  <view class="price wes" v-if="item.couponType == 'DISCOUNT'"
                    >{{ item.couponDiscount }}
                    <span class="small-text">折</span></view
                  >
                  <view class="price wes" v-else
                    >{{ item.price }}<span class="small-text">元</span></view
                  >
                  <view class="sub-price wes"
                    >满{{ item.consumeThreshold | unitPrice }}元可用</view
                  >
                </view>
              </view>
              <view class="line"></view>
              <view class="right" v-if="item.scopeType">
                <view class="content">
                  <view class="title-1">{{ item.title }}</view>
                  <view class="title-2"
                    >使用范围：{{
                      item.scopeType == "ALL" && item.storeId == "0"
                        ? "全平台"
                        : item.scopeType == "PORTION_GOODS"
                        ? "部分商品"
                        : item.scopeType == "PORTION_GOODS_CATEGORY"
                        ? "部分分类商品"
                        : item.storeName == "platform"
                        ? "全平台"
                        : item.storeName + ""
                    }}使用</view
                  >
                  <view v-if="item.endTime" class="time"
                    >有效期至{{ item.endTime }}</view
                  >
                </view>
                <view class="receive" @click="receive(item)">
                  <text>领取</text>
                </view>
              </view>
            </view>
          </view>
        </div>
      </div>
    </scroll-view>
  </view>
</template>

<script>
import { receiveCoupons } from "@/api/members.js";
import { getAllCoupons } from "@/api/promotions.js";
export default {
  data() {
    return {
      loadStatus: "more", //下拉状态
      whetherEmpty: false, //是否为空
      couponList: [], // 优惠券列表
      params: {
        pageNumber: 1,
        pageSize: 10,
      },
      storeId: "", //店铺 id,
      couponData: "",
    };
  },
  onLoad(option) {
    this.storeId = option.storeId;
    this.getCoupon();
  },
  //   onReachBottom() {
  //     this.loadMore();
  //   },
  onPullDownRefresh() {
    //下拉刷新
    this.params.pageNumber = 1;
    this.couponList = [];
    this.getCoupon();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    /**
     * 获取当前优惠券
     */
    getCoupon() {
      uni.showLoading({
        title: "加载中",
      });
      let submitData = {
        ...this.params,
      };
      // 判断当前是否有店铺
      this.storeId
        ? (submitData = {
            ...this.params,
            storeId: this.storeId,
          })
        : "",
        getAllCoupons(submitData)
          .then((res) => {
            if (this.$store.state.isShowToast) {
              uni.hideLoading();
            }
            uni.stopPullDownRefresh();
            if (res.data.code == 200) {
              // 如果请求成功，展示数据并进行展示
              this.couponData = res.data.result;
              if (this.couponData.total == 0) {
                // 当本次请求数据为空展示空信息
                this.whetherEmpty = true;
              } else {
                this.couponList.push(...this.couponData.records);
                this.loadStatus = "noMore";
              }
            }
          })
          .catch((err) => {
            if (this.$store.state.isShowToast) {
              uni.hideLoading();
            }
          });
    },
    /**
     * 领取优惠券
     */
    receive(val) {
      this.$u.throttle(() => {
        this.fetchCoupon(val);
      }, 1500);
    },

    fetchCoupon(val) {
      receiveCoupons(val.id).then((res) => {
        if (res.data.code == 200) {
          uni.showToast({
            title: "领取成功",
            icon: "none",
          });
        } else {
          uni.showToast({
            title: res.data.message,
            icon: "none",
          });
        }
      });
    },

    /**
     * 加载更多
     */
    loadMore() {
      if (
        this.couponData.total >
        this.params.pageNumber * this.params.pageSize
      ) {
        this.params.pageNumber++;
        this.getCoupon();
      }
    },
  },
  onNavigationBarButtonTap(e) {
    uni.navigateTo({
      url: "/pages/cart/coupon/couponIntro",
    });
  },
};
</script>
<style>
page {
  height: 100%;
}
</style>
<style lang="scss" scoped>
@import "../../../uni.scss";
.coupon-center {
  height: 100%;
  background: #f5f5f5;
  overflow: hidden;
  .list-scroll-content {
    height: 100%;
  }

  .swiper-box {
    margin-top: 88rpx;
    padding: 16rpx 24rpx;
    box-sizing: border-box;
    .coupon-item-box {
      margin-bottom: 20rpx;
    }

    .coupon-item {
      display: flex;
      align-items: center;
      height: 172rpx;
      position: relative;
      z-index: 2;
      .stack {
        position: absolute;
        height: 169rpx;
        left: 0;
        bottom: -54rpx;
        right: 0;
        border-radius: 24rpx;
        background: #e6fff7;
        padding: 12rpx 24rpx;
        display: flex;
        align-items: end;
        z-index: -1;
        font-size: 22rpx;
        color: #009968;
      }

      .left {
        height: 100%;
        width: 172rpx;
        background-color: #fff;
        border-radius: 30rpx;
        // position: relative;

        .message {
          color: #009968;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          height: 100%;
          .small-text {
            font-size: 24rpx;
          }

          view:nth-child(1) {
            font-weight: bold;
            font-size: 60rpx;
            max-width: 172rpx;
          }

          view:nth-child(2) {
            font-size: $font-sm;
          }
          .sub-price {
            overflow: hidden;
            word-wrap: normal;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 172rpx;
          }
        }
      }
      .line {
        width: 1rpx;
        height: 118rpx;
        background: #fffbfb;
        border: 1rpx dashed #009968;
        opacity: 0.3;
      }

      .right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 529rpx;
        font-size: 26rpx;
        height: 100%;
        background-color: #ffffff;
        overflow: hidden;
        position: relative;
        border-radius: 30rpx;

        .content {
          color: #212121;
          margin-left: 20rpx;
          line-height: 2em;
          > view:nth-child(1) {
            color: #ff6262;
            font-size: 30rpx;
          }

          .title-1,
          .title-2,
          .title-3 {
            font-size: 26rpx;
          }
          .time {
            color: #757575;
          }
        }
        .receive {
          color: #ffffff;
          background-color: #009968;
          border-radius: 24rpx;
          width: 104rpx;
          height: 48rpx;
          text-align: center;
          margin-right: 24rpx;
          line-height: 48rpx;
          // padding-top: 8rpx;
          // position: relative;
          // z-index: 2;
        }

        .jiao-1 {
          background-color: #ffc71c;
          width: 400rpx;
          transform: rotate(45deg);
          text-align: center;
          position: absolute;
          color: #ffffff;
          right: -130rpx;
          top: 0;
          .text-1 {
            margin-left: 68rpx;
            font-size: 28rpx;
          }
          .text-2 {
            margin-left: 68rpx;
            font-size: 28rpx;
          }
        }
        .no-icon {
          border-radius: 50%;
          width: 86rpx;
          height: 86rpx;
          margin-right: 48rpx;
          position: relative;
          z-index: 2;
        }
        .bg-quan {
          width: 244rpx;
          height: 244rpx;
          border: 6rpx solid $main-color;
          border-radius: 50%;
          opacity: 0.1;
          color: $main-color;
          text-align: center;
          padding-top: 30rpx;
          font-size: 130rpx;
          position: absolute;
          right: -54rpx;
          bottom: -60rpx;
        }
      }
    }
  }
}

.coupon-title {
  width: 260rpx;
}
</style>
